<template>
	<view class="content">
		<view class="headView">
			<view class="headView_nav flex_r_c" :style="{marginTop: boundRect_top + 'px'}">
				<image class="headView_nav_back" :src=" staticUrl + '/image/mine/mask/icon_back.png'" mode="widthFix"
					@click="back()"></image>
				<text>报告解析</text>
			</view>
		</view>
		<!-- 报告部分 -->
		<view class="reportContainer content">
			<view class="reportContainer_top">
				<image class="headBotImg" :src="imgSrc" mode="widthFix"></image>
				<view class="rankingView">
					<text class="ranking_text">超越<text class="rankingStyle">{{surpassPercent}}%</text>的同龄人群</text>
					<image v-if="surpassPercent < 20" :src=" staticUrl + '/image/report/icon_leafage0.png'"
						mode="widthFix"></image>
					<image v-else-if="surpassPercent < 40" :src=" staticUrl + '/image/report/icon_leafage1.png'"
						mode="widthFix"></image>
					<image v-else-if="surpassPercent < 60" :src=" staticUrl + '/image/report/icon_leafage2.png'"
						mode="widthFix"></image>
					<image v-else-if="surpassPercent < 80" :src=" staticUrl + '/image/report/icon_leafage3.png'"
						mode="widthFix"></image>
					<image v-else-if="surpassPercent < 100" :src=" staticUrl + '/image/report/icon_leafage4.png'"
						mode="widthFix"></image>
					<image v-else :src=" staticUrl + '/image/report/icon_leafage5.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="reportContainer_userInfo">
				<view class="reportContainer_userInfo_item1">
					<text>{{userBaseInfo.neckName}}</text>
					<text>病史 {{userBaseInfo.case}}</text>
				</view>
				<view class="reportContainer_userInfo_item2">
					<text>{{userBaseInfo.sex}}</text>
					<view class="hor_line">|</view>
					<text>{{userBaseInfo.age}} 岁</text>
					<view class="hor_line">|</view>
					<text>{{userBaseInfo.height}} cm</text>
					<view class="hor_line">|</view>
					<text>{{userBaseInfo.weight}} kg</text>
				</view>
			</view>
			<view class="paraName-card">
				<image :src=" staticUrl + '/image/report/icon_paraNameTip.png'" mode="widthFix"></image>
				<text>综合评估</text>
				<image :src=" staticUrl + '/image/report/icon_paraNameTip.png'" mode="widthFix"></image>
			</view>
			<view class="healthyStateView">
				<view class="healthyStateL">
					<text>健康状态</text>
					<text>检测日期: {{reportTime}}</text>
				</view>
				<view class="healthyStateR content" :style="{ background: compreScore.scoreColor }">
					{{compreScore.describe}}
				</view>
			</view>

			<view class="radarView">
				<view class="content radar_para1">
					<text>血管弹性</text>
					<view class="radar_btn content" :style="{ background: bloodElasticity.desColor }"
						@click="toReportDetail(0)">
						{{ bloodElasticity.describe }}
					</view>
				</view>
				<view class="content radar_para2">
					<text>调节能力</text>
					<view class="radar_btn content" :style="{ background: bloodAdjust.desColor }"
						@click="toReportDetail(1)">
						{{ bloodAdjust.describe }}
					</view>
				</view>
				<view class="content radar_para3">
					<text>血流波动</text>
					<view class="radar_btn content" :style="{ background: headHealth.desColor }"
						@click="toReportDetail(2)">
						{{ headHealth.describe }}
					</view>
				</view>

				<view class="content radar_para4">
					<text>心率</text>
					<view class="radar_btn content" :style="{ background: heartRate.desColor }"
						@click="toReportDetail(3)">
						{{ report.heartBeat }}
					</view>
				</view>

				<view class="content radar_para5">
					<text>血管年龄</text>
					<view class="radar_btn content" :style="{ background: bloodAge.desColor }"
						@click="toReportDetail(4)">
						{{ bloodAge.diff }}
					</view>
				</view>

				<qiun-data-charts type="radar" :chartData="chartData" :errorReload="false" :echartsH5="false"
					:echartsApp="false" background="none" :tapLegend="false" :ontouch="false" />
			</view>
			<!-- 全局 健康报告解读 -->
			<view class="dataInterView">
				<view class="dataInterView_title">
					<view class="dataInterView_icon content">!</view>
					<text>健康报告解读</text>
				</view>
				<view class="dataInterView_ex">
					<text>{{evaluations.synEvaluation}}</text>
				</view>
			</view>
		</view>

		<!-- 详细参数  用数字控制展示内容 1: 血管弹性  2:调节能力  3: 血流波动  4: 当前心率 -->
		<view class="paraView">
			<view class="paraView_titleView para_flex_row">
				<view class="paraView_titleView_item" @click="focusPara(1)">
					<view v-show="paraType != 1" class="paraView_head_default para_flex_row"
						style="border-radius: 16rpx 0 0 0;">
						<image :src=" staticUrl + '/image/report/icon_para1_gray.png'" mode="widthFix"></image>
						<text>血管弹性</text>
					</view>
					<view v-show="paraType === 1" class="paraView_head_choice content">
						<view class="paraView_head_choice_inner">
							<view class="paraView_head_choice_title para_flex_row">
								<image
									:src="staticUrl + '/image/report/icon_para1_' + bloodElasticity.iconColor + '.png'">
								</image>
							</view>
							<view class="paraView_head_choice_content">
								<text class="paraView_head_choice_content_title">血管弹性</text>
								<view class="paraView_head_choice_item">
									<view class="paraView_head_choice_item1"
										:style="{ color: bloodElasticity.desColor }">
										<text class="paraView_head_choice_item1_t1">{{report.hardScore}}<text
												class="paraView_head_choice_item1_t2">分</text></text>
									</view>
									<view class="paraView_head_choice_item2">
										<view class="para_flex_row">
											<image v-if="bloodElasticity.compareLast > 0"
												:src=" staticUrl + '/image/report/icon_compare_up.png'" mode="widthFix">
											</image>
											<image v-else-if="bloodElasticity.compareLast < 0"
												:src=" staticUrl + '/image/report/icon_compare_down.png'"
												mode="widthFix"></image>
											<view v-else style="width: 20rpx;height: 5rpx;"></view>
											<text>{{abs(bloodElasticity.compareLast) }}</text>
										</view>
										<text>对比上次</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="paraView_titleView_item" @click="focusPara(2)">
					<view v-show="paraType != 2" class="paraView_head_default para_flex_row">
						<image :src=" staticUrl + '/image/report/icon_para2_gray.png'" mode="widthFix"></image>
						<text>调节能力</text>
					</view>
					<view v-show="paraType === 2" class="paraView_head_choice content">
						<view class="paraView_head_choice_inner">
							<view class="paraView_head_choice_title para_flex_row">
								<image :src="staticUrl +'/image/report/icon_para2_' + bloodAdjust.iconColor + '.png'">
								</image>
							</view>
							<view class="paraView_head_choice_content">
								<text class="paraView_head_choice_content_title">调节能力</text>
								<view class="paraView_head_choice_item">
									<view class="paraView_head_choice_item1" :style="{ color: bloodAdjust.desColor }">
										<text class="paraView_head_choice_item1_t1">{{report.adjustScore}}<text
												class="paraView_head_choice_item1_t2">分</text></text>
									</view>
									<view class="paraView_head_choice_item2">
										<view class="para_flex_row">
											<image v-if="bloodAdjust.compareLast > 0"
												:src=" staticUrl + '/image/report/icon_compare_up.png'" mode="widthFix">
											</image>
											<image v-else-if="bloodAdjust.compareLast < 0"
												:src=" staticUrl + '/image/report/icon_compare_down.png'"
												mode="widthFix"></image>
											<view v-else style="width: 20rpx;height: 5rpx;"></view>
											<text>{{abs(bloodAdjust.compareLast)}}</text>
										</view>
										<text>对比上次</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="paraView_titleView_item" @click="focusPara(3)">
					<view v-show="paraType != 3" class="paraView_head_default para_flex_row">
						<image :src=" staticUrl + '/image/report/icon_para3_gray.png'" mode="widthFix"></image>
						<text>血流波动</text>
					</view>
					<view v-show="paraType === 3" class="paraView_head_choice content">
						<view class="paraView_head_choice_inner">
							<view class="paraView_head_choice_title para_flex_row">
								<image :src="staticUrl + '/image/report/icon_para3_' + headHealth.iconColor + '.png'">
								</image>
							</view>
							<view class="paraView_head_choice_content">
								<text class="paraView_head_choice_content_title">血流波动</text>
								<view class="paraView_head_choice_item">
									<view class="paraView_head_choice_item1" :style="{ color: headHealth.desColor }">
										<text class="paraView_head_choice_item1_t1">{{report.brainHealthScore}}<text
												class="paraView_head_choice_item1_t2">分</text></text>
									</view>
									<view class="paraView_head_choice_item2">
										<view class="para_flex_row">
											<image v-if="headHealth.compareLast > 0"
												:src=" staticUrl + '/image/report/icon_compare_up.png'" mode="widthFix">
											</image>
											<image v-else-if="headHealth.compareLast < 0"
												:src=" staticUrl + '/image/report/icon_compare_down.png'"
												mode="widthFix"></image>
											<view v-else style="width: 20rpx;height: 5rpx;"></view>
											<text>{{abs(headHealth.compareLast)}}</text>
										</view>
										<text>对比上次</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="paraView_titleView_item" @click="focusPara(4)">
					<view v-show="paraType != 4" class="paraView_head_default para_flex_row"
						style="border-radius: 0 16rpx 0 0;">
						<image :src=" staticUrl + '/image/report/icon_para4_gray.png'" mode="widthFix"></image>
						<text>当前心率</text>
					</view>
					<view v-show="paraType === 4" class="paraView_head_choice content">
						<view class="paraView_head_choice_inner">
							<view class="paraView_head_choice_title para_flex_row">
								<image :src="staticUrl + '/image/report/icon_para4_' + heartRate.iconColor + '.png'">
								</image>
							</view>
							<view class="paraView_head_choice_content">
								<text class="paraView_head_choice_content_title">当前心率</text>
								<view class="paraView_head_choice_item">
									<view class="paraView_head_choice_item1" :style="{ color: heartRate.desColor }">
										<text class="paraView_head_choice_item1_t1">{{report.heartBeat}}<text
												class="paraView_head_choice_item1_t2"
												style="font-size: 20rpx;">/bpm</text></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 4种分数的 详情页面 -->
			<view class="paraView_contView content">
				<!-- 彩虹条 -->
				<view v-show="paraType != 4" class="paraView_contView_rainbowView">
					<image :src=" staticUrl + '/image/report/icon_pointer.png'" mode="widthFix"
						:style="{left: pointerML + 'rpx'}"></image>
				</view>
				<!-- 波形类型 -->
				<view v-show="paraType == 1 || paraType == 2" class="dicroticView">
					<text class="dicroticViewT1">波形类型</text>
					<text class="dicroticViewT2" :style="{color: evaluations.regTypeIsNormal?'#01B09A':'#FF4D4D'}">【 {{waveType}} 】</text>
				</view>

				<!-- 详细参数 血管弹性-->
				<view v-show="paraType == 1" class="paraView_detailParaView content">
					<view class="paraView_detailParaView_item" v-for="(item,index) in bloodElasticityAccord"
						:key="index" @click="toParaDetail(item.name)">
						<image class="img_paraView_logo" :src=" staticUrl + '/image/report/icon_para_logo.png'"
							mode="widthFix"></image>
						<view class="paraView_detailParaView_border">
							<view class="paraView_detailParaView_inner content">
								<view class="paraView_detailParaView_inner1">
									<view class="paraView_detailParaView_inner1_title para_flex_row">
										<text>{{item.name}}</text>
										<text style="margin-left: 30rpx;">{{item.value == null?'--':item.value}}</text>
										<image v-if="item.referIcon != ''" style="margin-left: 16rpx;width: 15rpx;height: 15rpx;"
											:src="staticUrl + '/image/report/icon_paraRefer_' + item.referIcon + '.png'"
											mode="widthFix"></image>
									</view>
									<image :src=" staticUrl + '/image/report/icon_right2.png'" mode="widthFix">
									</image>
								</view>
								<view class="paraView_line"></view>
								<view class="paraView_detailParaView_inner2">
									<text>参考值</text>
									<text style="margin-left: 20rpx;">{{item.symbol}}{{ item.referVal }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="paraType == 2" class="paraView_detailParaView content">
					<view class="paraView_detailParaView_item" v-for="(item,index) in bloodAdjustAccord" :key="index"
						@click="toParaDetail(item.name)">
						<image class="img_paraView_logo" :src=" staticUrl + '/image/report/icon_para_logo.png'"
							mode="widthFix"></image>
						<view class="paraView_detailParaView_border">
							<view class="paraView_detailParaView_inner content">
								<view class="paraView_detailParaView_inner1">
									<view class="paraView_detailParaView_inner1_title para_flex_row">
										<text>{{item.name}}</text>
										<text style="margin-left: 30rpx;">{{item.value == null?'--':item.value}}</text>
										<image v-if="item.referIcon != ''" style="margin-left: 16rpx;width: 15rpx;height: 15rpx;"
											:src="staticUrl + '/image/report/icon_paraRefer_' + item.referIcon + '.png'"
											mode="widthFix"></image>
									</view>
									<image :src=" staticUrl + '/image/report/icon_right2.png'" mode="widthFix"></image>
								</view>
								<view class="paraView_line"></view>
								<view class="paraView_detailParaView_inner2">
									<text>参考值</text>
									<text v-if="index == 2" style="margin-left: 20rpx;">{{item.referVal[0]}} ~ {{ item.referVal[1] }}</text>
									<text v-else style="margin-left: 20rpx;">{{item.symbol}}{{ item.referVal }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 危险因素 -->
				<view v-if="paraType == 3" style="width: 560rpx;" class="content">
					<text class="danger_text">危险因素</text>
					<view class="danger_View flex_c_c_b">
						<view class="flex_r_c_b">
							<view class="danger_View_item">
								<image :src=" staticUrl + '/image/report/icon_danger1.png'" mode="widthFix"></image>
								<text>酒精摄入</text>
							</view>
							<view class="danger_View_item" style="margin-left: 1rpx;">
								<image :src=" staticUrl + '/image/report/icon_danger2.png'" mode="widthFix"></image>
								<text>血脂异常</text>
							</view>
						</view>

						<view class="flex_r_c_b">
							<view class="danger_View_item">
								<image :src=" staticUrl + '/image/report/icon_danger3.png'" mode="widthFix"></image>
								<text>心理因素</text>
							</view>
							<view class="danger_View_item" style="margin-left: 1rpx;">
								<image :src=" staticUrl + '/image/report/icon_danger4.png'" mode="widthFix"></image>
								<text>心脏疾病</text>
							</view>
						</view>
					</view>
				</view>

				<view v-if="paraType == 4" style="width: 560rpx;" class="content">
					<text class="danger_text">疾病知识</text>
					<view class="diseaseKnowledge">
						<image :src=" staticUrl + '/image/report/img_heartHigh.png'"></image>
						<image style="margin-left: 50rpx;" :src=" staticUrl + '/image/report/img_heartLow.png'"></image>
					</view>
				</view>

				<!-- 指数分析 -->
				<view v-show="paraType == 1 || paraType == 2" style="width: 560rpx;" class="content">
					<text class="danger_text">指数分析</text>
					<view class="dailyManager_view" style="background-color: #F5F5F5;">
						{{ paraType == 1?evaluations.hardScoreEvaluation:evaluations.adjustScoreEvaluation }}
					</view>
				</view>

				<view v-show="paraType != 4 && isShowCms" style="width: 560rpx;" class="content">
					<text class="danger_text">典型症状</text>
					<view class="cmsView_item_view">
						<view class="cmsView_item content" v-for="(item, index) in cms_symptom" :key="index">
							<text>{{ item }}</text>
						</view>
					</view>
					<text class="danger_text">诱发因素</text>
					<view class="cmsView_item_view">
						<view class="cmsView_item content" v-for="(item, index) in cms_factor" :key="index">
							<text>{{ item }}</text>
						</view>
					</view>
					<text class="danger_text">发病趋势</text>
					<view class="cmsView_item_view">
						<view class="cmsView_item content" v-for="(item, index) in cms_trend" :key="index">
							<text>{{ item }}</text>
						</view>
					</view>
				</view>

				<!-- 日常管理 通用view-->
				<view style="width: 560rpx;" class="content">
					<text class="danger_text">日常管理</text>
					<view class="dailyManager_view">{{ dailyManage }}</view>
				</view>
			</view>
		</view>

		<!-- 调养建议 -->
		<image style="width: 698rpx;margin-top: 34rpx;" :src=" staticUrl + '/image/report/img_suggest_blue.png'"
			mode="widthFix" @click="toSuggest()"></image>
		<!-- 数据解读 -->
		<image v-if="hasCheckAuth" style="width: 698rpx;margin-top: 24rpx;"
			:src=" staticUrl + '/image/report/img_interpretation.png'" mode="widthFix" @click="toInterpretation()">
		</image>

		<!--------------- 弹窗 区域 ----------------------------------------->

		<!-- 弹出层相关  进入页面后会有分数的 popup -->
		<uni-popup ref="popup_score" :mask-click="false" :safe-area="false">
			<view class="popupView content">
				<image v-if="compreScore.popupType == 0" class="topImg" :src=" staticUrl + '/image/report/winner.png'"
					mode="widthFix"></image>
				<view class="popupView_title content">
					<text>本次健康</text>
					<text>综合评分为</text>
				</view>
				<text class="popupView_Score" :style="{ color: compreScore.scoreColor }">{{ compreScore.score }}</text>
				<view v-if="compreScore.popupType == 0" class="popupView_content content">
					<text>各项指标无明显异常</text>
					<text>健康状态优秀</text>
					<text>恭喜您,请继续保持</text>
				</view>
				<view v-if="compreScore.popupType == 1" class="popupView_content content">
					<text>您的大脑处于亚健康状态</text>
					<text>日常生活需要注意保养</text>
					<text>防止恶化,引发疾病</text>
				</view>
				<view v-if="compreScore.popupType == 2" class="popupView_content content">
					<text>健康数据异常,存在脑损伤</text>
					<text>病变风险,建议您及时</text>
					<text>到医院进行相关检查</text>
				</view>
				<view class="popupView_button content" v-if="compreScore.popupType == 0 || compreScore.popupType == 2"
					:style="{ background: compreScore.scoreColor }" @click="closePopup()">
					我知道了
				</view>
				<view class="popupView_button content" v-else :style="{ background: compreScore.scoreColor }"
					@click="toSuggest()">查看调养建议</view>
			</view>
			<view class="content" style="width: 520rpx;">
				<image :src=" staticUrl + '/image/report/icon_close.png'"
					style="width: 71rpx;height: 72rpx;margin: 29rpx auto auto;" @click="closePopup()"></image>
			</view>
		</uni-popup>
		<!-- 分享 弹窗 -->
		<!-- 分享的蒙版 弹窗层 -->
		<uni-popup ref="sharePopup" :mask-click="true" :safe-area="false" type="dialog">
			<view class="screenView" @click="closeSharePopup()">
				<!-- :style="{ marginTop: menuBound_Bottom + 'px'}" -->
				<canvas canvas-id="canvas" id="canvas" :style="{ height: posterHeight + 'px' }"></canvas>
				<view class="pop-bottomView flex-r">
					<view class="pop-bottomView-item content">
						<image class="test" :src="staticUrl +'/image/suggest/share/icon_saveImage.png'"
							style="width: 91rpx;height: 90rpx;" @click="toSaveImage()"></image>
						<text>保存图片</text>
					</view>
					<view class="pop-bottomView-item content" style="margin-left: 300rpx;">
						<image :src="staticUrl +'/image/suggest/share/icon_friends.png'"
							style="width: 90rpx;height: 90rpx;" @click="shareTest()"></image>
						<text>微信好友</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as api from '@/api/login';
	const app = getApp();
	import config from '../../../config'
	const SCORELEVEL = config.SCORELEVEL
	export default {
		data() {
			return {
				staticUrl: this.$config.StaticUrl,
				boundRect_top: app.globalData.boundRect_top,
				userBaseInfo: {},
				reportTime: '0',
				hasCheckAuth: null, //是否可以查看数据解读
				report: {}, //...
				img1: '',
				img2: '',
				img3: '',
				// StaticUrl: this.$config.StaticUrl,
				base64: '', //pic
				innerAudioContext: null,
				isVoiceBroadcast: true, //是否语音播报
				isHistory: false,
				imgSrc: '', //用户头像
				surpassPercent: 85,
				// 综合评分相关参数
				compreScore: {
					score: 90, //综合评分
					describe: '健康',
					scoreColor: '#01B09A', //综合评分文字颜色
				},
				// 血管年龄相关
				bloodAge: {
					diff: 0,
					describe: '稳定',
					desColor: '#01B09A' //血管年龄 描述词颜色
				},
				// 血管弹性相关的参数 颜色相关
				bloodElasticity: {
					score: 98,
					iconColor: 'b',
					describe: '健康',
					desColor: '#01B09A', //描述词 颜色
					compareLast: 0
				},
				// 血流调节相关的参数 颜色相关
				bloodAdjust: {
					score: 98,
					iconColor: 'b',
					describe: '健康',
					desColor: '#01B09A', //描述词 颜色
					compareLast: 0

				},
				// 波动相关的参数 颜色相关
				headHealth: {
					score: 98,
					iconColor: 'b',
					describe: '健康',
					desColor: '#01B09A', //描述词 颜色
					compareLast: 0
				},
				// 心率
				heartRate: {
					score: 80,
					iconColor: 'b',
					describe: '正常',
					desColor: '#01B09A' //描述词 颜色
				},
				impWaveData: null,
				posterHeight: 0,
				chartData: {
					categories: ["血管弹性", "调节能力", "血流波动", "心率", "血管年龄"],
					series: [{
						name: "快速检测",
						data: [100, 100, 100, 100, 100]
					}, ]
				},
				// 每项参数的组成
				paraType: 1, //类型
				waveType: '', //波形类型
				dailyManage: '', //日常管理 -点击标题 赋值
				pointerML: -10, //
				//弹性依据
				bloodElasticityAccord: [{
						name: '上升时间',
						referVal: 0.22,
						unit: '(ts)',
						value: 0,
						symbol: '≤',
						referIcon: '',
					},
					{
						name: '转折高比值',
						referVal: 0.5,
						unit: '(fbs)',
						value: 0,
						symbol: '≥',
						referIcon: '',
					},
					{
						name: '重搏波角度',
						referVal: 3.0,
						unit: '(ri)',
						value: 0,
						symbol: '≤',
						referIcon: '',
					},
				],
				//血流调节
				bloodAdjustAccord: [{
						name: '波幅',
						referVal: 0.08,
						unit: '(hs)',
						value: 0,
						symbol: '≥',
						referIcon: '',
					},
					{
						name: '流出阻力系数',
						referVal: 0.9,
						unit: '(fis)',
						value: 0,
						symbol: '≤',
						referIcon: '',
					},
					{
						name: '对称系数',
						referVal: [0.8, 1.2],
						unit: '(sym)',
						value: 0,
						symbol: '',
						referIcon: '',
					},
				],
				evaluations: {},
				// cms 血管弹性默认项（60-80）分段
				isShowCms: false,
				cms_symptom: ['头痛', '头晕', '睡眠不足'], //典型症状
				cms_factor: ['三高', '久坐', '缺乏运动'], //诱发因素
				cms_trend: ['动脉粥样硬化', '管腔狭窄'] //发病趋势
			};
		},
		onLoad(option) {
			console.log('onload!', option);
			if (option.report != null && option.report != 'undefined') {
				let report = JSON.parse(option.report);
				this.report = report;
				this.getImpWaveByReportId(report.reportId);
				this.compreScore.score = report.synScore;
				// 综合评分
				if (report.synScore < SCORELEVEL[0]) {
					this.compreScore.scoreColor = '#E43241';
					this.compreScore.describe = '高风险'
					this.compreScore.popupType = 2;
				} else if (report.synScore < SCORELEVEL[1]) {
					this.compreScore.scoreColor = '#E2732F';
					this.compreScore.describe = '中风险'
					this.compreScore.popupType = 1;
				} else if (report.synScore < SCORELEVEL[2]) {
					this.compreScore.scoreColor = '#E9AA2F';
					this.compreScore.describe = '低风险'
					this.compreScore.popupType = 1;
				} else if (report.synScore < SCORELEVEL[3]) {
					this.compreScore.scoreColor = '#99CC48';
					this.compreScore.describe = '亚健康'
					this.compreScore.popupType = 1;
				}
				// 血管年龄
				let ageAvg = (report.minVascularAge + report.maxVascularAge) / 2
				this.getUserInfo(ageAvg);
				// 血管弹性
				this.bloodElasticity.score = report.hardScore;
				if (report.hardScore < SCORELEVEL[0]) {
					this.bloodElasticity.iconColor = 'r';
					this.bloodElasticity.describe = '高风险';
					this.bloodElasticity.desColor = '#E43241';
				} else if (report.hardScore < SCORELEVEL[1]) {
					this.bloodElasticity.iconColor = 'o';
					this.bloodElasticity.describe = '中风险';
					this.bloodElasticity.desColor = '#E2732F';
				} else if (report.hardScore < SCORELEVEL[2]) {
					this.bloodElasticity.iconColor = 'y';
					this.bloodElasticity.describe = '低风险';
					this.bloodElasticity.desColor = '#E9AA2F';
				} else if (report.hardScore < SCORELEVEL[3]) {
					this.bloodElasticity.iconColor = 'g';
					this.bloodElasticity.describe = '亚健康';
					this.bloodElasticity.desColor = '#99CC48';
				}
				// 血流调节
				this.bloodAdjust.score = report.adjustScore;
				if (report.adjustScore < SCORELEVEL[0]) {
					this.bloodAdjust.iconColor = 'r';
					this.bloodAdjust.describe = '高风险';
					this.bloodAdjust.desColor = '#E43241';
				} else if (report.adjustScore < SCORELEVEL[1]) {
					this.bloodAdjust.iconColor = 'o';
					this.bloodAdjust.describe = '中风险';
					this.bloodAdjust.desColor = '#E2732F';
				} else if (report.adjustScore < SCORELEVEL[2]) {
					this.bloodAdjust.iconColor = 'y';
					this.bloodAdjust.describe = '低风险';
					this.bloodAdjust.desColor = '#E9AA2F';
				} else if (report.adjustScore < SCORELEVEL[3]) {
					this.bloodAdjust.iconColor = 'g';
					this.bloodAdjust.describe = '亚健康';
					this.bloodAdjust.desColor = '#99CC48';
				}
				// 血流波动指数
				this.headHealth.score = report.brainHealthScore;
				if (report.brainHealthScore < SCORELEVEL[0]) {
					this.headHealth.iconColor = 'r';
					this.headHealth.describe = '高风险';
					this.headHealth.desColor = '#E43241';
				} else if (report.brainHealthScore < SCORELEVEL[1]) {
					this.headHealth.iconColor = 'o';
					this.headHealth.describe = '中风险';
					this.headHealth.desColor = '#E2732F';
				} else if (report.brainHealthScore < SCORELEVEL[2]) {
					this.headHealth.iconColor = 'y';
					this.headHealth.describe = '低风险';
					this.headHealth.desColor = '#E9AA2F';
				} else if (report.brainHealthScore < SCORELEVEL[3]) {
					this.headHealth.iconColor = 'g';
					this.headHealth.describe = '亚健康';
					this.headHealth.desColor = '#99CC48';
				}
				// 心率
				this.heartRate.score = report.heartBeat;
				if (report.heartBeat < 60) {
					this.heartRate.iconColor = 'r';
					this.heartRate.describe = '过缓';
					this.heartRate.desColor = '#E43241';
				} else if (report.heartBeat > 100) {
					this.heartRate.iconColor = 'r';
					this.heartRate.describe = '过速';
					this.heartRate.desColor = '#E43241';
				}

				// 获取对比的分数
				let isHistory = JSON.parse(option.isHistory);
				this.isHistory = isHistory;
				if (isHistory) {
					this.reportTime = report.createTime.slice(0, 10);
				}
				//获取上次的报告
				let t = setTimeout(() => {
					clearTimeout(t)
					this.getLastHistoryReport(report.createTime)
				}, 1000)
				this.getReportStatus(report.synScore)
			}
			let isVoiceBroadcast = uni.getStorageSync('isVoiceBroadcast');
			if (isVoiceBroadcast !== '' && isVoiceBroadcast !== 'undefined' && isVoiceBroadcast !== null) {
				this.isVoiceBroadcast = isVoiceBroadcast;
			}
		},
		mounted() {
			if (!this.isHistory) {
				this.reportTime = this.$utils.Current_date();
				this.report.createTime = this.$utils.Current_date();
				this.requestAudio();
			}
		},
		onReady() {
			// 给雷达图赋值
			let ageScore = 0
			let _ageAvg = parseInt((this.report.minVascularAge + this.report.maxVascularAge) / 2)
			let _diff = _ageAvg - this.userBaseInfo.age
			if (_diff <= -5) {
				ageScore = 100
			} else if (_diff == 0) {
				ageScore = 90
			} else if (_diff >= 45) {
				ageScore = 0
			} else {
				ageScore = 90 - (_diff * 2)
			}

			let _heartBeat = 80
			if (this.report.heartBeat == 0 || this.report.heartBeat >= 180) {
				_heartBeat = 0
			} else {
				_heartBeat = 100 - (Math.abs(this.report.heartBeat - 80))
			}

			this.chartData.series[0].data = [this.report.hardScore, this.report.adjustScore, this.report.brainHealthScore,
				_heartBeat, ageScore
			]
			this.focusPara(1)
			let that = this;
			this.getHeadshot()
			uni.getSystemInfo({
				success(res) {
					// console.log('Screen size>>',res);
					that.posterHeight = res.windowHeight - uni.upx2px(250);
					// console.log(res.windowHeight - uni.upx2px(250));
				}
			});
			uni.getImageInfo({
				src: 'https://xch.jseihc.com/public/platform/userApp/static/image/report/img_topHead.png',
				success(res) {
					// console.log(res);
					that.img1 = res.path;
				}
			});
			uni.getImageInfo({
				src: 'https://xch.jseihc.com/public/platform/userApp/static/image/report/img_decorate1.png',
				success(res) {
					// console.log(res);
					that.img2 = res.path;
				}
			});
			uni.getImageInfo({
				src: 'https://xch.jseihc.com/public/platform/userApp/static/image/report/img_EiQRCode.png',
				success(res) {
					// console.log(res);
					that.img3 = res.path;
				}
			});
		},
		onUnload() {
			if (!this.isHistory) this.innerAudioContext.destroy()
		},
		methods: {
			// 获取用户头像
			getHeadshot() {
				let that = this;
				let data = {
					userId: this.$store.state.userInfo.currentUser.userId,
					action: 'getHeadshot'
				};
				//调用接口请求个人信息
				api.getHeadshot(data).then(function(res) {
					if (res.data.success) {
						that.imgSrc = res.data.data.shotBase64;
					}
				}).catch(function(error) {
					console.log('getHeadshot fail', error);
				});
			},
			// 获取用户信息
			getUserInfo(ageAvg) {
				this.userBaseInfo = this.$store.state.userBaseInfo
				let userAge = this.$utils.getAge(this.userBaseInfo.birthday);
				this.userBaseInfo.age = userAge
				this.bloodAge.diff = ageAvg - userAge >= 0 ? '+' + (ageAvg - userAge) : (ageAvg - userAge)
				if (ageAvg - userAge > 15) {
					this.bloodAge.describe = '较差';
					this.bloodAge.desColor = '#E43241';
				} else if (ageAvg - userAge > 5 && ageAvg - userAge <= 15) {
					this.bloodAge.describe = '一般';
					this.bloodAge.desColor = '#E9AA2F';
				}
				// 将病史组合成字符串
				let caseStr = ''
				if (this.userBaseInfo.highBloodLipids) {
					caseStr += '  高血脂'
				}
				if (this.userBaseInfo.highBloodHyperglycemia) {
					caseStr += '  高血糖'
				}
				if (this.userBaseInfo.hypertension) {
					caseStr += '  高血压'
				}
				if (this.userBaseInfo.stroke) {
					caseStr += '  中风'
				}
				if (this.userBaseInfo.heartDisease) {
					caseStr += '  心脏病'
				}
				this.userBaseInfo.case = caseStr.length === 0 ? '无' : caseStr
				this.checkAuth(this.userBaseInfo.phone);
			},
			// 检查用户是否有权限查看数据解读
			checkAuth(phone) {
				let that = this;
				let data = {
					params: phone
				};
				api.hasCheckAuth(data).then(function(res) {
					console.log('hasCheckAuth success', res);
					if (res.data.success) {
						that.hasCheckAuth = res.data.data.hasCheckAuth;
					}
				}).catch(function(err) {
					console.log('hasCheckAuth fail', err);
				})
			},
			//获取超越人数百分比
			getReportStatus(score) {
				let that = this;
				let data = {
					userId: this.$store.state.userInfo.currentUser.userId,
					params: score
				};
				api.getReportStatus(data).then(function(res) {
					console.log('----getReportStatus  ', res);
					if (res.data.success) {
						that.surpassPercent = Math.floor(res.data.data.percent * 10) / 10;
					}
				}).catch(function(error) {
					console.log('getReportStatus fail', error);
				});
			},
			getLastHistoryReport(createTime) {
				let that = this;
				let data = {
					userId: this.$store.state.userInfo.currentUser.userId,
					params: {
						ltSearchKey: {
							createTime
						},
						orderDesc: 'createTime',
						currentPage: 1,
						pageSize: 1
					}
				};
				api.getHistoryReport(data).then(function(res) {
					console.log('请求上次历史数据 ', res);
					if (res.data.success) {
						let lastReport = res.data.data.reportList[0]
						that.bloodElasticity.compareLast = that.report.hardScore - lastReport.hardScore;
						that.bloodAdjust.compareLast = that.report.adjustScore - lastReport.adjustScore;
						that.headHealth.compareLast = that.report.brainHealthScore - lastReport.brainHealthScore;
					}
				}).catch(function(error) {
					console.log('get history Data fail', error);
				});
			},
			// 选择参数类型
			focusPara(index) {
				this.paraType = index
				switch (index) {
					case 1:
						this.setPointerDistance(this.bloodElasticity.score)
						this.dailyManage = this.report.hardSuggest
						if (this.report.hardScore < SCORELEVEL[1]) {
							this.isShowCms = true
							this.cms_symptom = ['头晕', '头痛', '精神萎靡', '四肢乏力', '眼前发黑'];
							this.cms_factor = ['三高', '肥胖', '饮食不合理', '肾脏功能不全'];
							this.cms_trend = ['大脑缺血', '脑出血', '脑梗死'];
						}
						break;
					case 2:
						this.setPointerDistance(this.bloodAdjust.score)
						this.dailyManage = this.report.adjustSuggest
						this.bloodAdjustAccord[0].value = this.impWaveData.hs
						if (this.impWaveData.hs < this.bloodAdjustAccord[0].referVal) this.bloodAdjustAccord[0].referIcon =
							'down'

						this.bloodAdjustAccord[1].value = this.impWaveData.fis
						if (this.impWaveData.fis > this.bloodAdjustAccord[1].referVal) this.bloodAdjustAccord[1]
							.referIcon = 'up'

						this.bloodAdjustAccord[2].value = this.impWaveData.baseImpSymFactor
						if (this.impWaveData.baseImpSymFactor < this.bloodAdjustAccord[2].referVal[0]) {
							this.bloodAdjustAccord[2].referIcon = 'down'
						} else if (this.impWaveData.baseImpSymFactor > this.bloodAdjustAccord[2].referVal[1]) {
							this.bloodAdjustAccord[2].referIcon = 'up'
						}
						if (this.report.adjustScore < SCORELEVEL[1]) {
							this.isShowCms = true
							this.cms_symptom = ['记忆力下降', '恶心呕吐', '疲劳', '头晕头痛'];
							this.cms_factor = ['三高', '心脏病', '颈椎病', '脑供血不足', '血管痉挛', '缺氧'];
							this.cms_trend = ['脑卒中', '血管堵塞', '脑梗塞', '脑血栓'];
						} else if (this.report.adjustScore >= SCORELEVEL[1] && this.report.adjustScore < SCORELEVEL[2]) {
							this.isShowCms = true
							this.cms_symptom = ['头晕', '头痛', '疲劳'];
							this.cms_factor = ['三高', '颈椎病', '肥胖', '熬夜'];
							this.cms_trend = ['腔隙性脑梗塞', '脑萎缩', '动脉硬化'];
						}
						break;
					case 3:
						this.setPointerDistance(this.headHealth.score)
						this.dailyManage = this.report.brainHealthSuggest
						if (this.report.brainHealthScore < SCORELEVEL[1]) {
							this.isShowCms = true
							this.cms_symptom = ['头痛头晕', '恶心呕吐', '视物模糊', '口角歪斜', '言语不清'];
							this.cms_factor = ['三高', '糖尿病', '心脏病', '不良生活习惯'];
							this.cms_trend = ['脑血栓', '脑出血', '脑梗塞'];
						} else if (this.report.brainHealthScore >= SCORELEVEL[1] && this.report.brainHealthScore <
							SCORELEVEL[2]) {
							this.isShowCms = true
							this.cms_symptom = ['肢体麻木', '头痛', '头晕', '恶心呕吐'];
							this.cms_factor = ['高血压', '高血糖', '高血脂', '心脏病'];
							this.cms_trend = ['脑供血不足', '血管堵塞', '腔隙性脑梗塞'];
						}
						break;
					case 4:
						this.dailyManage = this.report.heartBeatSuggest
						break;
				}
			},
			//设置 彩虹条指针的位置
			setPointerDistance(score) {
				if (score < SCORELEVEL[0]) {
					this.pointerML = parseInt(score * 2 - 10)
				} else if (score < SCORELEVEL[1]) {
					this.pointerML = parseInt(100 + ((score - SCORELEVEL[0]) * 10) - 10)
				} else if (score < SCORELEVEL[2]) {
					this.pointerML = parseInt(200 + ((score - SCORELEVEL[1]) * 10) - 10)
				} else if (score < SCORELEVEL[3]) {
					this.pointerML = parseInt(300 + ((score - SCORELEVEL[2]) * 6.6) - 10)
				} else {
					this.pointerML = parseInt(400 + ((score - SCORELEVEL[3]) * 6.6) - 10)
				}
			},
			toParaDetail(paraName) {
				uni.navigateTo({
					url: '/pages/detection/fastReport/paraExplain/paraExplain?paraName=' + paraName
				})
			},
			// 获取参数
			getImpWaveByReportId(reportId) {
				let that = this;
				let data = {
					userId: this.$store.state.userInfo.currentUser.userId,
					action: 'getImpWave',
					params: reportId
				};
				api.getImpWaveByReportId(data)
					.then(function(res) {
						console.log('getImpWaveByReportId success', res);
						if (res.data.success) {
							that.impWaveData = res.data.data.parameter;
							if (res.data.data.parameter.waveType != null) {
								that.waveType = that.$config.waveTypeMap[res.data.data.parameter.waveType]
							} else {
								that.waveType = '--'
							}

							that.bloodElasticityAccord[0].value = that.impWaveData.ts
							that.bloodElasticityAccord[1].value = that.impWaveData.fbs
							that.bloodElasticityAccord[2].value = that.impWaveData.ri

							that.bloodAdjustAccord[0].value = that.impWaveData.hs
							that.bloodAdjustAccord[1].value = that.impWaveData.fis
							that.bloodAdjustAccord[2].value = that.impWaveData.baseImpSymFactor
							that.getRegReportEvaluationByReportId(reportId)
						} else {
							that.$toast('暂无数据解读!');
						}
					})
					.catch(function(error) {
						console.log('getImpWaveByReportId fail', error);
					});
			},
			//获取参考值和解读文本
			getRegReportEvaluationByReportId(reportId) {
				let that = this;
				let data = {
					userId: this.$store.state.userInfo.currentUser.userId,
					action: '',
					params: reportId
				};
				api.getRegReportEvaluationByReportId(data).then(function(res) {
					console.log('getRegReportEvaluationByReportId success', res);
					if (res.data.success) {
						if (res.data.data.evaluation != null) {
							that.evaluations = res.data.data.evaluation
							that.bloodElasticityAccord[0].referVal = res.data.data.evaluation.tsMax
							if (that.impWaveData.ts > res.data.data.evaluation.tsMax) that.bloodElasticityAccord[0]
								.referIcon = 'up'

							that.bloodElasticityAccord[1].referVal = res.data.data.evaluation.fbsMin
							if (that.impWaveData.fbs < res.data.data.evaluation.fbsMin) that.bloodElasticityAccord[
								1].referIcon = 'down'

							that.bloodElasticityAccord[2].referVal = res.data.data.evaluation.riMax
							if (that.impWaveData.ri > res.data.data.evaluation.riMax) that.bloodElasticityAccord[2]
								.referIcon = 'up'

							that.bloodAdjustAccord[0].referVal = res.data.data.evaluation.hsMin
							if (that.impWaveData.hs < res.data.data.evaluation.hsMin) that.bloodAdjustAccord[0]
								.referIcon = 'down'
							that.bloodAdjustAccord[1].referVal = res.data.data.evaluation.fisMax
							if (that.impWaveData.fis > res.data.data.evaluation.fisMax) that.bloodAdjustAccord[1]
								.referIcon = 'up'
							that.bloodAdjustAccord[2].referVal = [res.data.data.evaluation.baseSymFactorMin, res
								.data.data.evaluation.baseSymFactorMax
							]
							if (that.impWaveData.baseImpSymFactor < res.data.data.evaluation.baseSymFactorMin) {
								that.bloodAdjustAccord[2].referIcon = 'down'
							} else if (that.impWaveData.baseImpSymFactor > res.data.data.evaluation
								.baseSymFactorMax) {
								that.bloodAdjustAccord[2].referIcon = 'up'
							}

						}
					}
				}).catch(function(error) {
					console.log('getRegReportEvaluationByReportId fail', error);
				});
			},
			toReportDetail(index) {
				let des, color
				switch (index) {
					case 0:
						des = this.bloodElasticity.describe
						color = this.bloodElasticity.desColor
						break;
					case 1:
						des = this.bloodAdjust.describe
						color = this.bloodAdjust.desColor
						break;
					case 2:
						des = this.headHealth.describe
						color = this.headHealth.desColor
						break;
					case 3:
						des = this.heartRate.describe
						color = this.heartRate.desColor
						break;
					case 4:
						des = this.bloodAge.describe
						color = this.bloodAge.desColor
						break;
				}
				let jumpContent = {
					des,
					color
				}
				uni.navigateTo({
					url: 'reportDetail/reportDetail?index=' + index + '&jumpContent=' + JSON.stringify(jumpContent)
				});
			},
			abs(value) {
				return Math.abs(value)
			},
			back() {
				console.log('back');
				uni.navigateBack({
					delta: 1
				});
			},
			// 请求音源 getVoiceRequestInfo
			requestAudio() {
				if (!this.isVoiceBroadcast) return;
				let that = this;
				let ttsStr =
					`您的本次检测报告为:综合评分${this.compreScore.describe},血管年龄${that.bloodAge.describe}，血管弹性${that.bloodElasticity.describe},血流调节能力${that.bloodAdjust.describe},血流波动${that.headHealth.describe},心率${that.heartRate.describe}`;
				let userId = this.$store.state.userInfo.currentUser.userId;
				let data = {
					userId: userId,
					action: 'getVoiceWithFileUrl',
					params: ttsStr
				};
				console.log(`语音播报文字${ttsStr}`);
				api.getVoiceWithFileUrl(data).then(function(res) {
					console.log('getVoiceRequestInfo success', res);
					that.playAudio(res.data.data.voice);
				}).catch(function(error) {
					console.log('getVoiceRequestInfo fail', error);
				});
			},
			// 请求语音播报
			playAudio(src) {
				// 定义一个音频
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = false;
				this.innerAudioContext.loop = false;
				this.innerAudioContext.src = src;
				this.innerAudioContext.play();
			},
			// 关闭弹出层
			closePopup() {
				this.$refs.popup_score.close();
			},
			// 查看调养建议
			toSuggest() {
				uni.navigateTo({
					url: '../suggest/suggest'
				});
			},
			// 查看详细的数据解读
			toInterpretation() {
				uni.navigateTo({
					url: 'dataInterpretation/dataInterpretation?report=' + JSON.stringify(this.report)
				});
			},
			share() {
				this.$refs.sharePopup.open('center');
				let T = setTimeout(() => {
					this.drawCanvas();
					uni.showLoading({
						title: '正在生成海报',
						mask: true
					});
					clearTimeout(T);
				}, 1000);
			},
			drawCanvas() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				let _menuBound_btm = that.menuBound_Bottom;
				// 获取画布元素宽高
				let ww = uni.upx2px(550);
				let hh = uni.upx2px(980);
				// let hh = that.posterHeight - 20;
				query
					.select('#canvas')
					.boundingClientRect(data => {
						let ctx = uni.createCanvasContext('canvas');
						// 绘制绿色背景
						ctx.setFillStyle('#34C0AE');
						ctx.fillRect(0, _menuBound_btm, ww, hh);
						ctx.drawImage(that.img1, uni.upx2px(40), _menuBound_btm, uni.upx2px(103), uni.upx2px(125));
						ctx.setFillStyle('#FFF');
						ctx.setFontSize(15);
						ctx.setTextAlign('left'); //设置对于坐标点的对齐方式
						ctx.fillText(that.userName, uni.upx2px(163), _menuBound_btm + uni.upx2px(
							50)); //计算距离，将文字定位于图片的某处
						ctx.fillText(that.reportTime, uni.upx2px(163), _menuBound_btm + uni.upx2px(
							90)); //计算距离，将文字定位于图片的某处
						ctx.setFontSize(60);
						ctx.fillText(that.compreScore.score, uni.upx2px(72), _menuBound_btm + uni.upx2px(256));
						ctx.setFontSize(15);
						ctx.fillText('全脑健康综合评分', uni.upx2px(72), _menuBound_btm + uni.upx2px(298));
						ctx.drawImage(that.img2, uni.upx2px(310), _menuBound_btm + uni.upx2px(67), uni.upx2px(185), uni
							.upx2px(211));
						// 分数 白色背景板
						ctx.setFillStyle('#FFF');
						ctx.fillRect(uni.upx2px(35), _menuBound_btm + uni.upx2px(320), uni.upx2px(479), uni.upx2px(
							420));
						// 分数
						ctx.setFillStyle('#999');
						ctx.setFontSize(12);
						ctx.fillText('血管年龄测定', uni.upx2px(98), _menuBound_btm + uni.upx2px(386));
						ctx.fillText('血管弹性指数', uni.upx2px(310), _menuBound_btm + uni.upx2px(386));
						ctx.fillText('血流调节指数', uni.upx2px(98), _menuBound_btm + uni.upx2px(490));
						ctx.fillText('血流波动指数', uni.upx2px(310), _menuBound_btm + uni.upx2px(490));
						ctx.fillText('心率分析', uni.upx2px(98), _menuBound_btm + uni.upx2px(590));
						// 年龄
						ctx.setFillStyle(that.bloodAge.desColor);
						ctx.setFontSize(22);
						ctx.fillText(that.bloodAge.age[0] + '-' + that.bloodAge.age[1], uni.upx2px(98),
							_menuBound_btm + uni.upx2px(440));
						ctx.setFontSize(12);
						ctx.fillText('岁', uni.upx2px(220), _menuBound_btm + uni.upx2px(435));
						//  弹性
						ctx.setFillStyle(that.bloodElasticity.desColor);
						ctx.setFontSize(22);
						ctx.fillText(that.report.hardScore, uni.upx2px(310), _menuBound_btm + uni.upx2px(440));
						ctx.setFontSize(12);
						if (that.report.hardScore.toString().length === 2) ctx.fillText(that.bloodElasticity.shareDes,
							uni.upx2px(370), _menuBound_btm + uni.upx2px(435));;
						if (that.report.hardScore.toString().length === 3) ctx.fillText(that.bloodElasticity.shareDes,
							uni.upx2px(390), _menuBound_btm + uni.upx2px(435));;
						// 调节
						ctx.setFillStyle(that.bloodAdjust.desColor);
						ctx.setFontSize(22);
						ctx.fillText(that.report.adjustScore, uni.upx2px(98), _menuBound_btm + uni.upx2px(540));
						ctx.setFontSize(12);
						if (that.report.adjustScore.toString().length === 2) ctx.fillText(that.bloodAdjust.shareDes,
							uni.upx2px(160), _menuBound_btm + uni.upx2px(535));
						if (that.report.adjustScore.toString().length === 3) ctx.fillText(that.bloodAdjust.shareDes,
							uni.upx2px(180), _menuBound_btm + uni.upx2px(535));
						// 波动
						ctx.setFontSize(22);
						ctx.setFillStyle(that.headHealth.desColor);
						ctx.fillText(that.report.brainHealthScore, uni.upx2px(310), _menuBound_btm + uni.upx2px(545));
						ctx.setFontSize(12);
						if (that.report.brainHealthScore.toString().length === 2) ctx.fillText(that.headHealth
							.shareDes, uni.upx2px(370), _menuBound_btm + uni.upx2px(540));;
						if (that.report.brainHealthScore.toString().length === 3) ctx.fillText(that.headHealth
							.shareDes, uni.upx2px(390), _menuBound_btm + uni.upx2px(540));;
						// 心率
						ctx.setFontSize(22);
						ctx.setFillStyle(that.heartRate.desColor);
						ctx.fillText(that.report.heartBeat, uni.upx2px(98), _menuBound_btm + uni.upx2px(645));
						ctx.setFontSize(12);
						if (that.report.heartBeat.toString().length === 2) ctx.fillText('次/分', uni.upx2px(160),
							_menuBound_btm + uni.upx2px(640));
						if (that.report.heartBeat.toString().length === 3) ctx.fillText('次/分', uni.upx2px(180),
							_menuBound_btm + uni.upx2px(640));

						// 公众号二维码
						ctx.setFillStyle('#FFF');
						ctx.fillRect(uni.upx2px(35), _menuBound_btm + uni.upx2px(768), uni.upx2px(479), uni.upx2px(
							179));
						ctx.drawImage(that.img3, uni.upx2px(80), _menuBound_btm + uni.upx2px(792), uni.upx2px(392), uni
							.upx2px(131));
						ctx.draw();
						setTimeout(() => {
							//不加延迟的话，base64有时候会赋予undefined
							uni.canvasToTempFilePath({
								canvasId: 'canvas',
								success: res => {
									console.log(res);
									that.base64 = res.tempFilePath;
								}
							});
							uni.hideLoading();
						}, 1200);
					})
					.exec();
			},
			toSaveImage() {
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.base64,
					success(res) {
						console.log('Save success!!!', res);
						that.$toast('图片保存成功', {
							icon: 'none'
						});
					}
				});
			},
			/* 分享到微信
			 *  scene >>>> WXSceneSession:分享到聊天界面  ||  WXSenceTimeline:分享到朋友圈
			 *  type: >>>> 0:图文 1: 纯文字 2:纯图片 3:音乐 4:视频 5:小程序
			 */
			shareTest() {
				let that = this;
				wx.showShareImageMenu({
					path: that.base64,
					success(res) {
						console.log('res>', res);
					},
					fail(err) {
						console.log('err>', err);
					}
				})
			},
		}
	};
</script>

<style>
	@import url('../../style/saveReport.css');
	@import url('@/common/css/report_para.css');

	@font-face {
		font-family: 'ranking';
		src: url('~@/static/font/rankingFont.ttf') format('truetype');
	}

	page {
		background-color: #f5f5f5;
		padding-bottom: 62rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.flex_r_c {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex_r_c_b {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex_c_c_b {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	/* 顶部区域 */
	.headView {
		position: relative;
		width: 750rpx;
		height: 349rpx;
		background-image: url('https://xch.jseihc.com/public/platform/userApp/static/image/report/img_headBg.png');
		background-size: 100%;
	}

	.headView_nav {
		width: 100%;
		height: auto;
	}

	.headView_nav text {
		font-size: 35rpx;
		color: #FFFFFF;
	}

	.headView_nav_back {
		position: absolute;
		left: 32rpx;
		width: 100rpx;
	}

	.headView_nav_share {
		margin-right: 25rpx;
		width: 50rpx;
	}

	/* 第三版 报告主体 */
	.reportContainer {
		margin-top: -100rpx;
		width: 700rpx;
		z-index: 99;
		background-color: #FFFFFF;
		border-radius: 16rpx;
	}

	.reportContainer_top {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.headBotImg {
		margin-top: -75rpx;
		width: 150rpx;
		border-radius: 50%;
	}

	.rankingView {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.rankingView image {
		margin-top: 16rpx;
		width: 130rpx;
	}

	.rankingStyle {
		margin: 0 5rpx;
		font-size: 38rpx;
		color: #1ABEBB;
		font-family: ranking;
	}

	.ranking_text {
		font-weight: bold;
		font-size: 26rpx;
		color: #5F6B7C;
	}

	.reportContainer_userInfo {
		margin-top: 30rpx;
		width: 630rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.reportContainer_userInfo_item1 {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.reportContainer_userInfo_item1 text:nth-child(1) {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
	}

	.reportContainer_userInfo_item1 text:nth-child(2) {
		margin-left: 37rpx;
		font-size: 23rpx;
		font-weight: bold;
		color: #5F6B7C;
	}

	.reportContainer_userInfo_item2 {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-start;
		justify-content: center;
		font-size: 23rpx;
		font-weight: bold;
		color: #96A3B4;
	}

	.hor_line {
		margin: 0 20rpx;
	}

	.paraName-card {
		margin-top: 32rpx;
		width: 628rpx;
		height: 78rpx;
		background-image: url('https://xch.jseihc.com/public/platform/userApp/static/image/report/img_paraNameBg.png');
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.paraName-card text {
		margin: 0 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #506A85;
	}

	.paraName-card image {
		width: 44rpx;
	}

	.healthyStateView {
		margin-top: 40rpx;
		width: 628rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.healthyStateL {
		width: 628rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.healthyStateL text:nth-child(1) {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
	}

	.healthyStateL text:nth-child(2) {
		margin-top: 10rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #96A3B4;
	}

	.healthyStateR {
		width: 119rpx;
		height: 55rpx;
		border-radius: 28rpx;
		font-size: 25rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.radarView {
		margin-top: 30rpx;
		position: relative;
		width: 700rpx;
		height: 600rpx;
	}

	.radarView text {
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.radar_btn {
		width: 90rpx;
		height: 40rpx;
		z-index: 900;
		border-radius: 15rpx;
		color: #fff;
		font-size: 26rpx;
		font-weight: bold;
	}

	.radar_para1 {
		position: absolute;
		top: 0;
		left: 290rpx;
	}

	.radar_para2 {
		position: absolute;
		top: 220rpx;
		left: 560rpx;
	}

	.radar_para3 {
		position: absolute;
		top: 480rpx;
		left: 455rpx;
	}

	.radar_para4 {
		position: absolute;
		top: 480rpx;
		left: 180rpx;
	}

	.radar_para5 {
		position: absolute;
		top: 210rpx;
		left: 30rpx;
	}

	.dataInterView {
		margin: 30rpx 0 40rpx;
		width: 655rpx;
		/* height: 182rpx; */
		padding-bottom: 30rpx;
		background-color: #E1F7E7;
		border-radius: 16rpx;
	}

	.dataInterView_title {
		margin: 31rpx 33rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.dataInterView_title text {
		margin-left: 22rpx;
		font-weight: bold;
		font-size: 25rpx;
		color: #000000;
		line-height: 21rpx;
	}

	.dataInterView_icon {
		width: 35rpx;
		height: 35rpx;
		font-size: 29rpx;
		color: white;
		background-color: #35C759;
		border-radius: 50%;
	}

	.dataInterView_ex {
		margin-left: 88rpx;
		width: 550rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.dataInterView_ex text {
		font-size: 19rpx;
		color: #616A64;
	}

	/* 弹窗    区域   */
	/* 快速检测进入的报告弹窗 */
	.popupView {
		width: 520rpx;
		height: 745rpx;
		background-color: white;
		border-radius: 15px;
		position: relative;
	}

	.popupView_title {
		position: absolute;
		top: 96rpx;
		font-size: 52rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #000000;
		line-height: 68rpx;
	}

	.topImg {
		position: absolute;
		top: -50rpx;
		width: 117rpx;
	}

	.popupView_Score {
		font-size: 160rpx;
		font-family: Roboto;
		font-weight: bold;
		position: absolute;
		top: 271rpx;
		line-height: 112rpx;
	}

	.popupView_content {
		position: absolute;
		top: 434rpx;
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: normal;
		color: #333333;
		line-height: 48rpx;
	}

	.popupView_button {
		position: absolute;
		top: 620rpx;
		/* margin-top: 50rpx; */
		width: 420rpx;
		height: 81rpx;
		border-radius: 12px;
		color: #ffffff;
	}

	/* 是否是本人弹窗 */
	/* 是否是本人的弹出层 */
	.popup1 {
		width: 620rpx;
		height: 750rpx;
		background-color: white;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.icon_content {
		margin-top: 93rpx;
		width: 238rpx;
		height: 238rpx;
	}

	.popup1Content {
		margin-top: 20rpx;
		font-size: 52rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #333333;
	}

	.popup_bottomView {
		width: 100%;
		height: 137rpx;
		/* border-top: solid #BFBFBF; */
		/* border: 1px #323233 solid; */
		border-radius: 0 0 15px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup_bottomViewitem {
		width: 50%;
		height: 100%;
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
	}

	/* 分享的弹窗 */
	.screenView {
		/* width: 100vw;
	height: 100vh; */
		/* position: relative; */
	}

	#canvas {
		margin: 20rpx auto auto;
		width: 550rpx;
	}

	.pop-bottomView {
		/* position: absolute; */
		bottom: 0;
		width: 100%;
		height: 200rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
	}

	.pop-bottomView-item text {
		margin-top: 30rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #323232;
		line-height: 17px;
	}

	.flex-r {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>